import { Button, Toast } from 'antd-mobile';
import React,{ useState } from 'react';
import  useMount from './useEffect/useMount';
import  useUnmount  from './useEffect/useUnmount';

const Child = () => {

  useMount(() => {
    Toast.show('首次渲染')
  });

  useUnmount(() => {
    Toast.show('组件已卸载')
  })

  return <div>你好，我是小杜杜</div>
}

const Index:React.FC<any> = (props)=> {
  const [flag, setFlag] = useState<boolean>(false)

  return (
    <div style={{padding: 50}}>
      <Button color='primary' onClick={() => {setFlag(v => !v)}}>切换 {flag ? 'unmount' : 'mount'}</Button>
      {flag && <Child />}
    </div>
  );
}

export default Index;
